<template>
  <div class="login-container">
    <div class="login-box">
      <h4>登录</h4>
      <div class="input-box">
       <input type="text" placeholder="手机、邮箱或用户名">
       <span>用户名不能为空</span>
      </div>
      <div class="input-box">
        <input type="password" placeholder="密码">
        <span>密码不能为空</span>
      </div>
      <div class="tips clear">
        <span class="worry-msg">用户名或密码错误</span>
        <a href="" class="forgot">忘记密码？</a>
      </div>
      <div class="login-btn">
        <a href="">确认</a>
      </div>
      <div class="to-register">
        <span>没有一加账户？</span>
        <router-link to="register" >立即注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
</script>

<style scoped>
  .login-container {
    width:100%;
    padding: 80px 0;
    background: #e5e5e5;
  }
  .login-box {
    max-width: 500px;
    margin: 0 auto;
    padding: 15px 50px;
    background: #efefef;
  }
  .login-box>h4 {
    font-size: 18px;
    padding: 20px 0;
    color: #212121;
    font-weight: 400;
  }
  .input-box {
    width:400px;
    padding: 10px 0px;
    position: relative;
  }
  .input-box>input {
    outline: 0;
    background: #fcfcfc;
    width: 100%;
    height: 50px;
    padding: 0;
    font-size: 16px;
    border-radius: 4px;
    line-height: 40px;
    text-indent: 20px;
    border: none;
  }
  .input-box>input.err {
    background: #fed9d9;
  }
  .input-box>span {
    display: none;
    line-height: 50px;
    position: absolute;
    right:15px;
    top:10px;
    font-size: 14px;
    color: #eb0028;
  }
  .tips {
    width: 400px;
    padding: 10px 0px;
  }
  .tips>.worry-msg,
  .tips>.forgot {
    font-size: 16px;
    color: #09c;
    height: 35px;
    line-height: 35px;
    text-decoration: none;
  }
  .tips>.forgot {
    float: right;
  }
  .tips>.worry-msg {
    float: left;
    display: none;
    color: #eb0028;
  }
  .login-btn>a {
    display: block;
    position: relative;
    width: 400px;
    height: 55px;
    font-size: 16px;
    line-height: 55px;
    margin: 10px auto;
    text-align: center;
    color: #fff;
    box-sizing: content-box;
    border: 1px solid #d70250;
    background: #eb0028;
    border-radius: 4px;
  }
  .login-btn>a:before {
    content: '';
    display: block;
    width: 0px;
    height: 55px;
    background-color: #d70250;
    border-radius: 4px;
    position: absolute;
    top:0;
    left:0;
    transition: width .2s;
  }
  .login-btn>a.ishover:before {
    width: 400px;
  }
  .to-register {
    width: 400px;
    margin: 0 auto;
    font-size: 16px;
    color: #666;
    /*height: 40px;*/
    /*line-height: 40px;*/
    padding: 20px 0px;
  }
  .to-register>a {
    color: #09c;
  }
</style>

